// webpack插件
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");

// 环境变量：决定入口是客户端还是服务端
const isDevelopment = process.env.NODE_ENV === "development"; // 检查是否为开发环境
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE && !isDevelopment  ? "server" : "client";

module.exports = {
  css: {
    extract: false
  },
  outputDir: './dist/'+target,
  configureWebpack: () => ({
    // 将 entry 指向应用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 对 bundle renderer 提供 source map 支持
    devtool: 'source-map',
    // 这允许 webpack 以 Node 适用方式处理动态导入(dynamic import)，
    // 并且还会在编译 Vue 组件时告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
    target: TARGET_NODE ? "node" : "web",
    node: TARGET_NODE ? undefined : false,
    output: {
      // 此处告知 server bundle 使用 Node 风格导出模块
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined,
      globalObject: 'this'
    },
    // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的 bundle 文件。
    externals: TARGET_NODE
      ? nodeExternals({
          // 不要外置化 webpack 需要处理的依赖模块。
          // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
          // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
          allowlist: [/\.css$/, /element-ui/]
        })
      : undefined,
    optimization: {
      splitChunks: TARGET_NODE ? false : undefined
    },
    // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
    // 服务端默认文件名为 `vue-ssr-server-bundle.json`
    plugins: [TARGET_NODE && !isDevelopment ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),  
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        });
      });
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8001,
    https: false,
    hotOnly: false,
    // http 代理配置
    before: (app) => { },
     proxy: {
      '/api': {
        target: 'http://localhost:8089', // 要代理的目标地址
        changeOrigin: true, // 是否跨域
        // localhost:8888/api/user => 触发代理 =>
        //  http://www.baidu.com/user  想要这种
        //  http://www.baidu.com/api/user  下面是目前的
        // pathRewrite: {
          '^/api': '' // 相当于将跨域代理之后的地址进行再次替换 就可以将 /api去掉
        // }
      }
    } 
  },
};